import React, {PureComponent} from 'react';
import NavigationFactory from '../../utils/navigationFactory';
import Popular from '../Popular/popular';

import {
  View,
  Text,
  StyleSheet,
  Image,
  Dimensions,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import Swiper from 'react-native-swiper';
const {width} = Dimensions.get('window');
import AppConfig from '../../config/appConfig';
import {TenThousandToStr, TimestampToTime} from '../../utils/utils';

import AlibcaMgr from '../../sdkManager/alibabaManager';
import ViewUtil from '../../utils/viewUtil';
import {ChangePromotionUrl,GetPromotionDataStr} from '../../mode/promotionUrlCtr';
@NavigationFactory
class DetailPage extends PureComponent {
  componentDidMount() {
    // AlibcaMgr.asyncInit((code, map) => {
    //   this.setState({
    //     text: map.code,
    //   });
    // });
  }

  componentWillUnmount() {}

  constructor(props) {
    super(props);
    const {route} = this.props;

    this.state = {
      item: route.params.item,

      Pid: 'mm_169220122_1290100019_110104050415', //三段式
      Adzoneid: '110104050415', //pid三段式最后一段
      taokeAppkey: '29182154', //'28617401', //阿里妈妈那边网站或者app的appkey

      OpenType: 'Auto', //打开的方式
      clientType: 'taobao', //taobao---唤起淘宝客户端；tmall---唤起天猫客户端
      BACK_URL: 'alisdk://', //唤端返回的scheme
      AlibcFailModeType: 'AlibcNativeFailModeJumpH5', //（唤端失败模式）
      isvcode: 'app', //必须传
    };
  }

  onClickCoupon = () => {
    console.log('领取');
    console.log(this.state.item.CouponUrl);
    if (this.state.item.TypeFrom === AppConfig.JinDong) {
    }
    if (this.state.item.TypeFrom === AppConfig.TaoBao) {
      this.sendToTaoBao();
    }
    if (this.state.item.TypeFrom === AppConfig.PingDuoDuo) {
    }
  };
  //=================================淘宝==============================
  //发送领取到淘宝
  sendToTaoBao = () => {
      ViewUtil.ShowLoading(true)
    //转高佣
      ChangePromotionUrl(this.state.item).then(item=> {
        //初始化
          AlibcaMgr.asyncInit((code, map) => {
              console.log(typeof code);
              if (code !== 0) {
                  ViewUtil.ShowToast('初始化失败!');
                  return;
              }
              AlibcaMgr.isLogin((code, param) => {
                  if (code === 0) {
                      //已经登录
                      this.toTaoBao();
                  } else {
                      //登录
                      AlibcaMgr.showLogin((code, param) => {
                          //显示
                          this.toTaoBao();
                      });
                  }
              });
          });
      })


  };

  ///跳转到淘宝详情页
  toTaoBao = () => {
      console.log("转后url====>:"+this.state.item.CouponUrl)
    var parm = {
      // url: this.state.item.item_url
      url: this.state.item.CouponUrl,
    };
    var params = this.mkParam(parm);

    AlibcaMgr.showPage(
      {
        type: 'url', //detail shop mycard url
        payload: params,
      },
      (code, info) => {},
    );
  };

  //处理参数
  mkParam = (param) => {
    param.Pid = param.Pid && param.Pid !== '' ? param.Pid : this.state.Pid;
    param.Adzoneid =
      param.Adzoneid && param.Adzoneid !== ''
        ? param.Adzoneid
        : this.state.Adzoneid;
    param.taokeAppkey =
      param.taokeAppkey && param.taokeAppkey !== ''
        ? param.taokeAppkey
        : this.state.taokeAppkey;

    param.OpenType =
      param.OpenType && param.OpenType !== ''
        ? param.OpenType
        : this.state.OpenType;
    param.clientType =
      param.clientType && param.clientType !== ''
        ? param.clientType
        : this.state.clientType;
    param.BACK_URL =
      param.BACK_URL && param.BACK_URL !== ''
        ? param.BACK_URL
        : this.state.BACK_URL;
    param.AlibcFailModeType =
      param.AlibcFailModeType && param.AlibcFailModeType !== ''
        ? param.AlibcFailModeType
        : this.state.AlibcFailModeType;
    param.isvcode =
      param.isvcode && param.isvcode !== ''
        ? param.isvcode
        : this.state.isvcode;

    param.BizCodeStr =
      param.BizCodeStr && param.BizCodeStr !== '' ? param.BizCodeStr : '';
    param.sellerId =
      param.sellerId && param.sellerId !== '' ? param.sellerId : '';
    return param;
  };
  //=================================淘宝==============================
  render() {
    return (
      <ScrollView>
        <View>
          {/*轮播图*/}
          <View style={{width: width, height: width * 0.8}}>
            <Swiper
              autoplayTimeout={4}
              style={styles.wrapper}
              autoplay={true}
              loop={true}>
              {this.state.item.goods_gallery_urls.map((imageSrc, index) => {
                if (imageSrc.indexOf('http') == -1) {
                  imageSrc = 'https:' + imageSrc;
                }
                return (
                  <View>
                    <View style={styles.slide}>
                      <Image
                        resizeMode="stretch"
                        style={{width: width, height: width * 0.8}}
                        source={{uri: imageSrc}}
                      />
                    </View>
                  </View>
                );
              })}
            </Swiper>
          </View>

          {/*描述*/}
          <View style={styles.view_1}>
            <View style={styles.text_1}>
              <Text
                style={{
                  display: 'flex',
                  overflow: 'hidden',
                  '-webkit-line-clamp': 3,
                  '-webkit-box-orient': 'vertical',
                  color: '#121212',
                  textOverflow: 'ellipsis',
                  width: '100%',
                  wordBreak: 'break-word',
                  fontSize: 17,
                }}>
                <Text style={styles.jingPing}>
                  {this.state.item.TypeFrom === null
                    ? ''
                    : AppConfig.GetTypeStr(this.state.item.TypeFrom)}
                </Text>
                {this.state.item.Title}
              </Text>
            </View>
          </View>

          {/*价格*/}
          <View style={styles.view_2}>
            <View style={styles.view_2_contain}>
              <Text style={styles.juanhou}>
                卷后价￥
                <Text style={styles.juanhou._price}>
                  {this.state.item.EndPrice}
                  <Text style={styles.juanhou._truePrice}>
                    ￥{this.state.item.Price}
                  </Text>
                </Text>
              </Text>
              {
                <Text style={styles.mouthSell}>
                  月销:{TenThousandToStr(this.state.item.SaleCount)}
                </Text>
              }
            </View>
          </View>

          {/*领卷*/}
          <View style={styles.view_3}>
            <View style={styles.view_lingjuan}>
              <View style={styles.lingjuan_1}>
                <Text style={styles.lingjuan_1.CouponMoney}>
                  <Text style={styles.lingjuan_1.CouponMoney.yuan}>
                    {this.state.item.CouponMoney}
                  </Text>
                  元优惠卷
                </Text>
                {this.state.item.CouponStartTime > 0 ? (
                  <Text style={styles.lingjuan_1.time}>
                    使用期限: {TimestampToTime(this.state.item.CouponStartTime)}{' '}
                    至 {TimestampToTime(this.state.item.CouponEndTime)}
                  </Text>
                ) : (
                  <View />
                )}
              </View>
              <View style={styles.lingjuan_2}>
                <Text style={styles.lingjuan_2.line}>. . . . . . .</Text>
              </View>
              <TouchableOpacity
                style={styles.lingjuan_3}
                activeOpacity={0.8}
                onPress={this.onClickCoupon}>
                <View>
                  <Text style={styles.lingjuan_3.text}>立即领取</Text>
                </View>
              </TouchableOpacity>
            </View>
          </View>
          {/*推荐理由*/}
          {this.state.item.Desc === null ? (
            <View />
          ) : (
            <View style={styles.tuijiangliyouContain}>
              <View style={styles.tuijiangliyouContain.contain}>
                <Text style={styles.tuijiangliyouContain.text}>
                  推荐理由:
                  <Text style={styles.tuijiangliyouContain.textCotain}>
                    {this.state.item.Desc}
                  </Text>
                </Text>
              </View>
            </View>
          )}

          {/*猜你喜欢*/}
          <View style={styles.view_4_like}>
            <View style={styles.view_4_like.line} />
            <Text style={styles.view_4_like.like_Text}>猜你喜欢:</Text>
            {
              // this.state.similarItems === []?<View/> : (
              //   <Popular data={this.state.similarItems}></Popular>
              // )
              <Popular item={this.state.item} />
            }
          </View>
        </View>
      </ScrollView>
    );
  }
}

const styles = {
  wrapper: {},
  view_1: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 15,
  },
  text_1: {
    display: 'flex',
    height: 60,
    width: '95%',
    flexDirection: 'row',
    fontSize: 30,
  },
  jingPing: {
    height: 35,
    width: 100,
    backgroundColor: '#e20b22',
    borderRadius: 30,
    flexDirection: 'row',
    fontSize: 20,
    color: '#dddddd',
    padding: 5,
  },
  view_2: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },

  view_2_contain: {
    display: 'flex',
    width: '95%',
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
  },

  juanhou: {
    fontSize: 24,
    color: '#e23c03',
    _price: {
      marginLeft: 3,
      fontSize: 30,
      color: '#e20009',
    },
    _truePrice: {
      color: '#666666',
      marginLeft: 5,
      textDecorationLine: 'line-through',
      fontSize: 17,
    },
  },
  mouthSell: {
    display: 'flex',
    color: '#e20009',
    fontSize: 15,
  },

  view_3: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: 130,
    width: '100%',
    backgroundColor: '#dddddd',
    marginTop: 10,
  },

  view_lingjuan: {
    // display: 'flex',
    width: '95%',
    height: 120,
    backgroundColor: '#ff585d',
    borderRadius: 15,
    flexDirection: 'row',
  },

  lingjuan_1: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: '70%',
    CouponMoney: {
      color: 'white',
      fontSize: 20,
      marginBottom: 20,
      yuan: {
        fontSize: 30,
      },
    },
    time: {
      color: 'white',
      fontSize: 13,
    },
  },

  lingjuan_2: {
    width: '3%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',

    line: {
      color: 'white',
      display: 'flex',
      writingMode: 'tb-rl',
    },
  },

  lingjuan_3: {
    width: '25%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    background: '#ff0c03',
    text: {
      color: 'white',
      fontSize: 20,
    },
  },

  tuijiangliyouContain: {
    marginTop: 10,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    contain: {
      width: '95%',
    },
    text: {
      fontSize: 24,
      color: '#121212',
    },
    textCotain: {
      fontSize: 18,
      color: '#666666',
    },
  },

  view_4_like: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    line: {
      marginTop: 8,
      width: '100%',
      height: 5,
      backgroundColor: '#dfdfdf',
    },
    like_Text: {
      marginTop: 5,
      fontSize: 25,
      width: '95%',
      color: '#121212',
    },
  },
};
export default DetailPage;
